<template>
    <view class="content" v-if="showPrivacyAuthModel" @touchmove.stop.prevent="stopMove">
        <view class="wrapper">
            <view class="title">{{ name }}</view>
            <view class="u-p-b-15">
                在你使用【{{ name }}】 服务之前，请仔细阅读<text class="text-blue" @click="ready">
                    《{{ name }}隐私保护指引》</text>。如你同意《{{ name }}隐私保护指引》，请点击“同意”开始使用【{{ name }}】。
            </view>
            <view class="btns">
                <view>
                    <navigator open-type="exit" target="miniProgram" @click.stop="cancel">退出</navigator>
                </view>
                <button id="agree-btn" open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="confirm">
                    同意
                </button>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'privacy-auth-model', //隐私协议弹窗组件
        props: {
            showCancel: {
                type: Boolean,
                default: true,
            },
            name: String,
        },
        data() {
            return {
                showPrivacyAuthModel: false,
                // name: '选金汇'
            }
        },
        // bus: { //下方有全局事件委托插件源码
        //     closePrivacyModel() { //全局事件委托，为了同时关闭其他页面弹出的隐私协议弹窗，例如同时打开的几个tab页面
        //         this.showPrivacyAuthModel = false
        //     },
        // },
        mounted() {
            this.onNeedPrivacyAuthorization()
            console.log('00000000000')
        },
        methods: {
            /**
             * @desc: 用户点击拒绝按钮
             * @Author: wkiwi
             * @function: onNeedPrivacyAuthorization
             */
            handleDisAgreePrivacyAuthorization() {
                this.showPrivacyAuthModel = false
                this.resolvePrivacyAuthorization && this.resolvePrivacyAuthorization({
                    event: 'disagree'
                })
            },
            /**
             * @desc: 用户点击同意按钮
             * @Author: wkiwi
             * @function: handleAgreePrivacyAuthorization
             */
            handleAgreePrivacyAuthorization() {
                this.showPrivacyAuthModel = false
                this.resolvePrivacyAuthorization && this.resolvePrivacyAuthorization({
                    buttonId: 'agree-btn',
                    event: 'agree'
                })
                // this.$bus('closePrivacyModel') //关闭其他页面授权弹窗 //下方有全局事件委托插件源码
            },
            /**
             * @desc: 监听调用隐私API回调
             * @Author: wkiwi
             * @function: onNeedPrivacyAuthorization
             */
            onNeedPrivacyAuthorization() {
                if (!wx.onNeedPrivacyAuthorization) {
                    return
                }
                let _this = this
                wx.onNeedPrivacyAuthorization(resolve => {
                    console.log('onNeedPrivacyAuthorization',resolve);
                    _this.showPrivacyAuthModel = true
                    _this.resolvePrivacyAuthorization = resolve
                })
            },
            cancel() {
                this.handleDisAgreePrivacyAuthorization()
                console.log('cancel');
                this.$emit('cancelC') //组件外部事件预留
            },
            stopMove() {
                //遮罩层拦截页面滚动事件
                return false
            },
            confirm() {
                this.handleAgreePrivacyAuthorization()
                console.log('confirm');
                this.$emit('confirmC') //组件外部事件预留
            },
            ready() {
                uni.openPrivacyContract({
                    success: () => {}, // 打开成功
                    fail: () => {}, // 打开失败
                })
            },
        },
    }
</script>

<style scoped lang="scss">
    .content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .wrapper{
        width: 580rpx;
        border-radius: 20rpx;
        background: #fff;
        padding: 50rpx;
    }
    .title{
        font-size: 34rpx;
        text-align: center;
        padding-bottom: 30rpx;
    }
    .btns{
        width: 480rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding-top: 30rpx;
    }
    .btns>view{
        color: #8799a3;
        border: 2rpx solid #8799a3;
        border-radius: 10rpx;
        padding: 15rpx 30rpx;
    }
    
    button{
        padding: 20rpx 30rpx;
        margin: 0 !important;
        font-size: 30rpx;
        line-height: 1;
        background-color: #0eb56d;
        color: #ffffff;
        
        &:after {
            border: none;
        }
    }
    
    
</style>